<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绝对定位盒模型</title>

    <script src="../../js/jquery-latest.js"></script>
</head>
<body>

<h1>Absolute Box</h1>
<div class="container">
    <div>Before</div>
    <div class="box before">Absolute Before</div>
    <div class="box">&uarr;<br />Top<br />&larr;Left&nbsp;&nbsp;&nbsp;Right&rarr;<br />Bottom<br />&darr;</div>
    <div class="box after">Absolute after</div>
    <div>After</div>
</div>

<style>

    * div{
        text-align: center;

        border-top: 5px solid gray;
        border-right: 5px solid black;
        border-bottom: 5px solid black;
        border-left: 5px solid gray;
        background-color: gold;
    }

    *.container{
        position: absolute;
    }
    *.box{
        position: absolute;
        overflow: auto;
        visibility: visible;
        z-index: auto;
        left: 100px;
        right: auto;
        top: 0;
        bottom: auto;
        width: 220px;
        height: 100px;
        margin: 10px;
        padding: 10px;
    }

    *.before{
        width: 75px;
        height: auto;
        left: 400px;
        right: auto;
        top: 100px;
        bottom: auto;
    }
    *.after{
        width: 75px;
        height: auto;
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
    }

</style>

</body>
</html>